<template>
  <a-card :bordered="false" style="margin-bottom: 10px">
    <BaseInfo :id="personId"/>
    <a-tabs v-if="isUroscopy" default-active-key="1" @change="onTabChange1">
      <a-tab-pane key="1" tab="常规尿液检测">
        <a-alert type="info" :showIcon="true">
          <div slot="message">
            该 <span class="b1">{{ infoObj1.sjskType == 1 ? '社戒' : '社康' }}</span> 人员常规尿液检测规则：第一年 <span class="b1"> {{
              infoObj1.rulesOne
            }}</span>；第二年 <span class="b1"> {{ infoObj1.rulesTwo }}</span>；第三年 <span class="b1"> {{
              infoObj1.rulesThree
            }}</span>；共需要做<span class="b1"> {{ infoObj1.urineTotal }}</span> 次常规尿液检测,已完成<span class="b1"> {{
              infoObj1.completeCount
            }}</span>次，已取消<span class="b1"> {{ infoObj1.cancelTotal }}</span> 次，补录<span class="b1"> {{
              infoObj1.collectionCount
            }}</span> 次，、免除<span class="b1"> {{ infoObj1.notDetectionCount }}</span> 次，待开始<span class="b1"> {{
              infoObj1.waitBeginCount
            }}</span> 次
          </div>
        </a-alert>
        <RecordList ref="recordList11" :isUroscopy="isUroscopy"/>
      </a-tab-pane>
      <a-tab-pane key="2" tab="突击尿液检测" force-render>
        <a-alert type="info" :showIcon="true">
          <div slot="message">
            该 <span class="b1">{{ infoObj1.sjskType == 1 ? '社戒' : '社康' }}</span> 人员突击尿液检测要求：<span class="b1"> {{
              infoObj1.assaultTime
            }}</span>，共需要做<span class="b1"> {{ infoObj1.urineTotal }}</span> 次突击尿液检测，已完成<span class="b1"> {{
              infoObj1.completeCount
            }}</span>次，已取消<span class="b1"> {{ infoObj1.cancelTotal }}</span> 次突击尿液检测，待完成<span class="b1"> {{
              infoObj1.waitBeginCount
            }}</span> 次
          </div>
        </a-alert>
        <RecordList ref="recordList12" :isUroscopy="isUroscopy"/>
      </a-tab-pane>
      <a-tab-pane key="3" tab="处置脉络" force-render>
        <HandleList ref="handleListId1"/>
      </a-tab-pane>
    </a-tabs>
    <a-tabs v-else default-active-key="1" @change="onTabChange2">
      <a-tab-pane key="1" tab="常规毛发检测">
        <a-alert type="info" :showIcon="true">
          <div slot="message">
            该 <span class="b1">{{ infoObj2.sjskTypeName }}</span> 人员常规毛发检测规则：<span class="b1">{{
              infoObj2.detectTime
            }}</span>，共需要做 <span class="b1">{{ infoObj2.detectTotal }}</span>
            次常规毛发检测，已完成 {{ infoObj2.completeCount }} 次，已取消 {{ infoObj2.cancelTotal }} 次，待完成 {{
              infoObj2.waitDetectCount
            }} 次
          </div>
        </a-alert>
        <RecordList ref="recordList21" :isUroscopy="isUroscopy"/>
      </a-tab-pane>
      <a-tab-pane key="2" tab="突击毛发检测" force-render>
        <RecordList ref="recordList22" :isUroscopy="isUroscopy"/>
      </a-tab-pane>
      <a-tab-pane key="3" tab="处置脉络" force-render>
        <HandleList ref="handleListId2"/>
      </a-tab-pane>
    </a-tabs>
  </a-card>
</template>

<script>
import BaseInfo from '@/views/sjsk/modules/BaseInfo'
import RecordList from './modules/RecordList'
// import RecordList2 from './modules/RecordList2'
import HandleList from './modules/HandleList'
import * as uroscopyApi from '@/api/sjsk/check/uroscopy.js'

export default {
  components: {
    BaseInfo,
    RecordList,
    // RecordList2,
    HandleList
  },

  data() {
    return {
      isUroscopy: true,
      infoObj1: {},
      infoObj2: {},
      personId: this.$route.query.sjskPersonId
    }
  },

  created() {
    console.log("route1:")
    console.log(this.$route)
    this.getRouter(this.$route.name)
  },
  watch: {
    $route(data) {   //data为当前路由信息
      console.log("route2:")
      console.log(data)
      this.getRouter(data.name)
    }
  },
  methods: {
    getRouter(name) {
      if (name == "uroscopy-record") {  //尿检
        console.log("尿检")
        this.isUroscopy = true
        this.getUrineStatistical(1)
        // this.title = "尿液检测预约"
        setTimeout(() => {
          this.$refs.recordList11.setUrineType(1)
          this.$refs.recordList11.onQuery()
        }, 500)
      } else {  // 发检
        console.log("发检")
        this.isUroscopy = false
        this.getSewageStatistical(3)
        // this.title = "毛发检测预约"
        setTimeout(() => {
          this.$refs.recordList21.setUrineType(3)
          this.$refs.recordList21.onQuery()
        }, 500)
      }
    },
    //尿检统计
    getUrineStatistical(type) {
      let params = {
        sjskPersonId: this.$route.query.sjskPersonId,
        urineType: type //检测类型（1-定期尿检；2-突击尿检；3-定期发检；4-突击发检）
      }
      uroscopyApi.sjskUrineStatistical(params).then((res) => {
        if (res.success) {
          this.infoObj1 = res.result ? res.result : {}
        }
      })
        .catch((e) => {
          this.$message.warn('请求失败！')
        })
    },
    //发检统计
    getSewageStatistical(type) {
      let params = {
        sjskPersonId: this.$route.query.sjskPersonId,
        urineType: type //检测类型（1-定期尿检；2-突击尿检；3-定期发检；4-突击发检）
      }
      uroscopyApi.sjskSewageStatistical(params).then((res) => {
        if (res.success) {
          this.infoObj2 = res.result ? res.result : {}
        }
      })
        .catch((e) => {
          this.$message.warn('请求失败！')
        })
    },
    onTabChange1(val) {
      if (val == 1) { //常规尿检
        this.$refs.recordList11.setUrineType(1)
        this.$refs.recordList11.onQuery()
        this.getUrineStatistical(1)
      }
      if (val == 2) {//突击尿检
        this.$refs.recordList12.setUrineType(2)
        this.$refs.recordList12.onQuery()
        this.getUrineStatistical(2)
      }
      if (val == 3) { //处置脉络
        this.$refs.handleListId1.getDetail()
      }
    },
    onTabChange2(val) {
      if (val == 1) { //常规发检
        this.$refs.recordList21.setUrineType(3)
        this.$refs.recordList21.onQuery()
        this.getSewageStatistical(3)
      }
      if (val == 2) {//突击发检
        this.$refs.recordList22.setUrineType(4)
        this.$refs.recordList22.onQuery()
        this.getSewageStatistical(4)
      }
      if (val == 3) { //处置脉络
        this.$refs.handleListId2.getDetail(5)
      }
    },
  },
}
</script>
<style lang="less" scoped>
.b1 {
  color: #1890FF;
}
</style>
